<!-- 等级评价机构 -->
<template>
	<view class="course-container">
		<!-- 课程列表 -->
		<view class="course-list">
			<view class="course-item" v-for="(item, index) in evaList" :key="index" @click="levelDetails(index)">
				<view class="course-left">
					<u-image :src="item.cover" width="220rpx" height="240rpx" mode="aspectFill" radius="4"></u-image>
				</view>

				<view class="course-right">
					<text class="course-name">{{ item.pjjgb_name }}</text>
					<text class="course-level">{{ item.pjjgb_desc }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: '',
				value2: '2',
				options1: [{
						label: '考试',
						value: 1,
					},
					{
						label: '培训',
						value: 2,
					},
					{
						label: '考培',
						value: 3,
					}
				],
				options2: [{
						label: '一级',
						value: 1,
					},
					{
						label: '二级',
						value: 2,
					},
					{
						label: '三级',
						value: 3,
					}
				],
				evaList: [{
						id: 1,
						cover: '/static/course1.jpg',
						name: '机构一',
						content: '一级、二级、三级、四级机构二机构二机构二',
					},
					{
						id: 2,
						cover: '/static/course2.jpg',
						name: '机构二',
						content: '一级机构二机构二机构二机构二机构二',
					}
				]
			}
		},
		onShow() {
			this.getJgPjList()
		},
		methods: {
			getJgPjList() {
				this.$u.api.querypjjgblist().then(res => {
					console.log('等级：', res)
					this.evaList = res.data.base_info
				})
			},
			changeLevel(index) {
				this.currentLevel = index;
				// 这里可以根据选择的等级筛选课程
				// this.filterCourses();
			},
			// 报名
			buyCourse(id) {
				// uni.showToast({
				// 	title: '购买课程: ' + id,
				// 	icon: 'none'
				// });
				// 实际开发中调用报名接口
				uni.navigateTo({
					url: `/pages/examTrain/examdetails`
				});
			},
			// 带参数跳转
			levelDetails(id) {
				// uni.navigateTo({
				// 	url: `/pages/levelEvaluation/levelEvaluation?id=${id}`
				// });
				uni.navigateTo({
					url: '/pages/levelEvaluation/levelDetails'
				});
			},
			change(index) {
				this.$u.toast(`点击了第${index}项`);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.course-container {
		padding: 20rpx;
		background-color: #f5f7fa;
	}

	.category-header {
		padding: 20rpx 0;

		.category-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.filter-section {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 8rpx;
		// margin-bottom: 20rpx;

		.filter-title {
			font-size: 30rpx;
			color: #333;
			margin-bottom: 20rpx;
			display: block;
		}

		.filter-tags {
			display: flex;
			flex-wrap: wrap;

			.tag-item {
				margin-right: 20rpx;
				margin-bottom: 15rpx;
			}
		}
	}

	.course-list {
		background-color: #fff;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.course-item {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;

		&:last-child {
			border-bottom: none;
		}
	}

	.course-left {
		margin-right: 20rpx;
	}

	.course-right {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.course-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

</style>